import React, { PureComponent } from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { TableC, NoDataC } from '../../../../comps';
import moment from 'moment';
import styles from './index.less';
@Form.create()
@connect(({ loading, globalM, informationM }) => ({ loading, globalM, informationM }))
export default class PlanInfo extends PureComponent {
  state = {
    dictMapSelect: [],
  };
  componentDidMount() {
    const {
      globalM: { dataDictionary },
    } = this.props;
    this.setState({
      dictMapSelect: dataDictionary['ASSETS_INTEREST_BASIS'],
    });
  }
  UNSAFE_componentWillReceiveProps(nextProps) {}

  //表格数据
  renderTable = () => {
    let {
      informationM: { formDatas, basicInfo },
      securityType,
    } = this.props;
    let dataSource = securityType == '12' ? formDatas.zgtzptNonstandarCashFlows || [] : basicInfo.zgtzptNonstandarCashFlows || [];
    dataSource.map((item, key) => {
      item.key = key + 1;
    });
    const columns = [
      {
        title: '期数',
        key: 'key',
        width: '8%',
      },
      {
        title: '开始日期',
        key: 'startDate',
        render: (text, record, index) => {
          return moment(text).format('YYYY-MM-DD');
        },
      },
      {
        title: '结束日期',
        key: 'endDate',
        render: (text, record, index) => {
          return moment(text).format('YYYY-MM-DD');
        },
      },
      {
        title: '付息金额',
        key: 'payInterestAmount',
        type: 'money',
      },
      {
        title: '还本金额',
        key: 'repaymentAmount',
        type: 'money',
      },
      {
        title: '剩余面额',
        key: 'spareFaceValue',
        type: 'money',
      },
    ];
    return (
      <div>
        <TableC columns={columns} dataSource={dataSource} rowKey='id' hidePage={true} scroll={{ y: '390px' }} />
      </div>
    );
  };

  render() {
    const { dictMapSelect } = this.state;
    const {
      securityType,
      informationM: { formDatas, basicInfo },
    } = this.props;
    let baseInfo = securityType == '12' ? formDatas?.baseInfo : basicInfo;
    let interestBasis = dictMapSelect.filter((item) => {
      return item.code === baseInfo?.interestBasis || item.code === baseInfo?.interestRules;
    });
    return (
      <div className={styles.planInfo}>
        {securityType == '12' ? (
          <>
            <div className={styles.info}>
              <div>
                初始份额面值：<span>{baseInfo?.parTotalValue ? Number(baseInfo?.parTotalValue).toFixed(2) : '--'}</span>
              </div>
              <div>
                利率：<span>{baseInfo?.fixedRate ? (baseInfo?.fixedRate * 100).toFixed(2) + '%' : '--'}</span>
              </div>
              <div>
                计息基础：<span>{interestBasis.length ? interestBasis[0].value : '--'}</span>
              </div>
              <div>
                付息频率：<span>{baseInfo?.interestRate ? baseInfo?.interestRate : '--'}次/年</span>
              </div>
            </div>
            {this.renderTable()}
          </>
        ) : (
          <>
            <div className={styles.info}>
              <div>
                发行价格：<span>{baseInfo?.issueprice ? Number(baseInfo?.issueprice).toFixed(2) : '--'}</span>
              </div>
              <div>
                利率：<span>{baseInfo?.couponRate ? baseInfo?.couponRate.toFixed(2) + '%' : '--'}</span>
              </div>
              <div>
                计息基础：<span>{interestBasis.length ? interestBasis[0].value : '--'}</span>
              </div>
              <div>
                计息频率：<span>{baseInfo?.interestFrequency ? baseInfo?.interestFrequency : '--'}次/年</span>
              </div>
            </div>
            {this.renderTable()}
          </>
        )}
      </div>
    );
  }
}

// props默认值
PlanInfo.propsTypes = {
  securityType: PropTypes.string, // 标的类型：7-非标(理财直融) 12- 非标(非理财直融)）
};
